<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '200px'
      },
      height: {
        type: String,
        default: '200px'
      },
      data: {
        type: Array
      }
    },
    data() {
      return {
        weatherIcons: {
          'Sunny': './data/asset/img/weather/sunny_128.png',
          'Cloudy': './data/asset/img/weather/cloudy_128.png',
          'Showers': './data/asset/img/weather/showers_128.png'
        },
        whData: '',
        nameList: ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'],
        chart: null,
        option1: {
          title: {
            text: '餐桌数据',
            subtext: '更新时间',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b} : {c} ({d}%)'
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['西凉', '益州', '兖州', '荆州', '幽州']
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: [
                {
                  value: '',
                  name: '',
                  label123: {
                    normal: {
                      formatter: [
                        '{title|{b}}{abg|}',
                        '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                        '{hr|}',
                        '  {Sunny|}{value|202}{rate|55.3%}',
                        '  {Cloudy|}{value|142}{rate|38.9%}',
                        '  {Showers|}{value|21}{rate|5.8%}'
                      ].join('\n'),
                      backgroundColor: '#eee',
                      borderColor: '#777',
                      borderWidth: 1,
                      borderRadius: 4,
                      rich: {
                        title: {
                          color: '#eee',
                          align: 'center'
                        },
                        abg: {
                          backgroundColor: '#333',
                          width: '100%',
                          align: 'right',
                          height: 25,
                          borderRadius: [4, 4, 0, 0]
                        },
                        Sunny: {
                          height: 30,
                          align: 'left',
                          backgroundColor: {
                            image: ''
                          }
                        },
                        Cloudy: {
                          height: 30,
                          align: 'left',
                          backgroundColor: {
                            image: ''
                          }
                        },
                        Showers: {
                          height: 30,
                          align: 'left',
                          backgroundColor: {
                            image: ''
                          }
                        },
                        weatherHead: {
                          color: '#333',
                          height: 24,
                          align: 'left'
                        },
                        hr: {
                          borderColor: '#777',
                          width: '100%',
                          borderWidth: 0.5,
                          height: 0
                        },
                        value: {
                          width: 20,
                          padding: [0, 20, 0, 30],
                          align: 'left'
                        },
                        valueHead: {
                          color: '#333',
                          width: 20,
                          padding: [0, 20, 0, 30],
                          align: 'center'
                        },
                        rate: {
                          width: 40,
                          align: 'right',
                          padding: [0, 10, 0, 0]
                        },
                        rateHead: {
                          color: '#333',
                          width: 40,
                          align: 'center',
                          padding: [0, 10, 0, 0]
                        }
                      }
                    }
                  }
                },
                { value: 1, name: '' },
                { value: 1, name: '' },
                { value: 1, name: '' },
                { value: 1, name: '' }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        option: {}
      }
    },
    mounted() {
      this.whData = this.genData(50)
      const that = this
      const whChart = {
        title: {
          text: '餐桌数量统计',
          subtext: '更新时间',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: that.whData.legendData,

          selected: that.whData.selected
        },
        series: [
          {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: that.whData.seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.option = whChart
      if (this.data) {
        const temp = []
        for (let i = 0; i < this.data.length; i++) {
          temp.push(this.data[i].name)
        }
        this.option.legend.data = temp
        this.option.series[0].data = this.data
      }
      this.initChart()
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
        this.chart.setOption(
          this.option
        )
      },
      genData(count) {
        const legendData = []
        const seriesData = []
        const selected = {}
        for (let i = 0; i < count; i++) {
          const name = Math.random() > 0.65 ? this.makeWord(4, 1) + '·' + this.makeWord(3, 0) : this.makeWord(2, 1)
          legendData.push(name)
          seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
          })
          selected[name] = i < 6
        }

        return {
          legendData: legendData,
          seriesData: seriesData,
          selected: selected
        }
      },
      makeWord(max, min) {
        const nameLen = Math.ceil(Math.random() * max + min)
        const name = []
        for (let i = 0; i < nameLen; i++) {
          name.push(this.nameList[Math.round(Math.random() * this.nameList.length - 1)])
        }
        return name.join('')
      }
    }
  }
</script>
